<template>
  <div>
    <div>
      <el-divider content-position="center">合同上传</el-divider>
    </div>
    <div>
      <div style="text-align: right">
        <el-upload
            class="upload-demo"
            action="http://localhost:8081/index/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="handleAvatarSuccess"
            :file-list="fileList">
          <el-button size="small" type="primary">点击上传合同</el-button>
          <div slot="tip" class="el-upload__tip">只能上传pdf格式</div>
        </el-upload>
      </div>
      <div>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="cuploadTime"
              label="日期"
              sortable
              width="380">
          </el-table-column>
          <el-table-column
              prop="cname"
              label="合同名称"
              width="380">
          </el-table-column>
          <el-table-column
              prop="cstatus"
              label="状态"
              width="200">
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.cstatus === '0' ? 'success' : 'danger'"
                  disable-transitions>{{scope.row.cstatus === '0' ? '选中' : '未选中'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="选择为主合同" placement="top">
                <el-button @click="handleEdit(scope.$index, scope.row)" type="warning" icon="el-icon-star-off" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看合同" placement="top">
                <el-button @click="handleGo(scope.$index, scope.row)" icon="el-icon-search" circle></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ContractManagement",
  data() {
    return {
      fileList: [],
      tableData: [],
      contractSrc:'',
      contractName:'',
      boss:{
        bid:'',
        bname:''
      }
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleAvatarSuccess(res, file) {
      let boss = JSON.parse(localStorage.getItem("boss"));
      if (boss !== null){
        this.boss.bid = boss.bid
        this.boss.bname = boss.bname
        this.contractSrc = res.data
        this.contractName = file.name
        axios({
          method:'post',
          url:'http://localhost:8081/contract/addContract',
          data:{
            cName: this.contractName,
            cSrc: this.contractSrc,
            bName: this.boss.bname,
            bId: this.boss.bid
          }
        }).then(res=>{
          if (res.data.code === 0){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            location.href = "/contractManagement"
          }
        }).catch(err=>{
          console.log(err)
        })
      }
    },
    handleEdit(index, row) {
      axios({
        method:'post',
        url:'http://localhost:8081/contract/updateContract',
        data:{
          id: row.cid,
          status: row.cstatus
        }
      }).then(res=>{
        console.log(res)
        if (res.data.code === 400 || res.data.code === 500){
          this.$message.error(res.data.msg);
          return
        }
        this.$message({
          message: res.data.msg,
          type: 'success'
        });
        setInterval(function () {
          location.href = "/contractManagement"
        },1000)

      }).catch(err=>{
        console.log(err)
      })
    },
    handleDelete(index, row) {
      console.log(index, row);
      axios({
        method:'post',
        url:'http://localhost:8081/contract/deleteContract',
        data:{
          id: row.cid,
          status: row.cstatus
        }
      }).then(res=>{
        if (res.data.code === 400 || res.data.code === 500){
          this.$message.error(res.data.msg);
          return
        }
        this.$message({
          message: res.data.msg,
          type: 'success'
        });
        setInterval(function () {
          location.href = "/contractManagement"
        },1000)
      }).catch(err=>{
        console.log(err)
      })
    },
    handleGo(index, row){
      window.open(row.csrc, '_blank')
    }
  },
  mounted() {
    axios({
      method:'get',
      url:'http://localhost:8081/contract/getContractList'
    }).then(res=>{
      console.log(res)
      this.tableData = res.data.data
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
